<template>
    <div>
        <h3>单个插槽的标题</h3>
        <my-component>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </my-component>
        <!-- 渲染结果 -->
        <!-- <div class="child">
                <h2>我是子组件的标题</h2>
                <p>这是一些初始内容</p>
                <p>这是更多的初始内容</p>
        </div> -->
        
        <app-layout>
            <h3 slot="header">具名插槽标题</h3>
            <p>主要内容的一个段落。</p>
            <p>另一个主要段落。</p>
            <p slot="footer">这里有一些联系信息</p>
        </app-layout>
        <!-- 渲染结果 -->
        <!-- <div class="container">
            <header>
                <h1>这里可能是一个页面标题</h1>
            </header>
            <main>
                <p>主要内容的一个段落。</p>
                <p>另一个主要段落。</p>
            </main>
            <footer>
                <p>这里有一些联系信息</p>
            </footer>
        </div> -->

        <!-- 作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项： -->

        <h3>作用域插槽</h3>
        <slot-scopeprop>
            <template slot-scope="props">
                 <p>hello from parent</p>
                 <p>{{ props.text }}</p>
            </template>   
        </slot-scopeprop>
    </div>
</template>
<script>
import MyComponent from './components/slotScope';
import AppLayout from './components/slotScopeName';
import SlotScopeprop from './components/slotScopeProp'
    export default {
        components: {MyComponent, AppLayout, SlotScopeprop}
    }
</script>

